﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>22_Cube</title>
    <link href="css/common.css" rel="stylesheet" />
    <script src="js/gl-matrix.js"></script>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec4 aPosition;
        attribute vec4 aColor;
        uniform mat4 uMvpMatrix;
        varying vec4 vColor;

        void main() {
        gl_Position = uMvpMatrix * aPosition;
        vColor = aColor;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;

        varying vec4 vColor;

        void main() {
        gl_FragColor = vColor;
        }
    </script>
    <script>
        var canvas = document.getElementById('mycanvas');
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;

        var gl = canvas.getContext('webgl');

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, document.getElementById('shader-vs').innerHTML);
        gl.compileShader(vertexShader);

        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, document.getElementById('shader-fs').innerHTML);
        gl.compileShader(fragmentShader);

        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        var aPosition = gl.getAttribLocation(shaderProgram, 'aPosition');
        var aColor = gl.getAttribLocation(shaderProgram, 'aColor');
        var uMvpMatrix = gl.getUniformLocation(shaderProgram, 'uMvpMatrix');

        // 投影矩阵
        var pmat = mat4.create();
        mat4.perspective(pmat, Math.PI * 30 / 180, gl.drawingBufferWidth / gl.drawingBufferHeight, 1, 100);
        var vmat = mat4.create();
        mat4.lookAt(vmat, vec3.fromValues(3, 3, 7), vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
        var vpmat = mat4.create();
        mat4.mul(vpmat, pmat, vmat);
        gl.uniformMatrix4fv(uMvpMatrix, false, vpmat);

        // 顶点矩阵
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
             1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v0 White
            -1.0, 1.0, 1.0, 1.0, 0.0, 1.0,  // v1 Magenta
            -1.0, -1.0, 1.0, 1.0, 0.0, 0.0,  // v2 Red
             1.0, -1.0, 1.0, 1.0, 1.0, 0.0,  // v3 Yellow
             1.0, -1.0, -1.0, 0.0, 1.0, 0.0,  // v4 Green
             1.0, 1.0, -1.0, 0.0, 1.0, 1.0,  // v5 Cyan
            -1.0, 1.0, -1.0, 0.0, 0.0, 1.0,  // v6 Blue
            -1.0, -1.0, -1.0, 0.0, 0.0, 0.0   // v7 Black
        ]), gl.STATIC_DRAW);

        gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * 6, 0);
        gl.enableVertexAttribArray(aPosition);

        gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * 6, Float32Array.BYTES_PER_ELEMENT * 3);
        gl.enableVertexAttribArray(aColor);

        // 索引矩阵
        var indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array([
            0, 1, 2, 0, 2, 3,    // front
            0, 3, 4, 0, 4, 5,    // right
            0, 5, 6, 0, 6, 1,    // up
            1, 6, 7, 1, 7, 2,    // left
            7, 4, 3, 7, 3, 2,    // down
            4, 7, 6, 4, 6, 5     // back
        ]), gl.STATIC_DRAW);

        // 渲染
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
    </script>
</body>
</html>
